
import React, { Component } from 'react'

// 引入动画库
import { CSSTransition } from 'react-transition-group'
// 引入动画样式
import './assets/app.css'


class App2 extends Component {

  state = {
    isShow: true
  }

  handleShoworHide = () => {
    this.setState(state => {
      return {
        isShow: !state.isShow
      }
    })
  }

  render() {
    return (
      <div>
        <CSSTransition
          in={this.state.isShow}
          timeout={600}
          classNames="alert"
          appear={true}
          unmountOnExit
          onEntered={el => el.style.color = 'blue'}
        >
          <h3>你好世界</h3>
        </CSSTransition>
        <button onClick={this.handleShoworHide}>隐藏或显示</button>
      </div >
    )
  }
}

export default App2;
